<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改个人信息</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>

<body>
    <div class="container">
        <h2>修改个人信息</h2>
        <form id="updateUser">
        <input type="hidden" class="form-control" id="id" name="id">
        <!-- 修改头像 -->
        <div class="form-group">
            <label for="currentAvatar">当前头像:</label>
            <div>
                <img id="currentAvatar" src="pic/cat.png" alt="当前头像" class="img-thumbnail" width="150">
            </div>
            <label for="newAvatar">上传新头像:</label>
            <input type="file" id="image" accept="image/*" onchange="previewAvatar(event)">
            <div class="mt-2">
                <img id="previewAvatar" src="" alt="头像预览" class="img-thumbnail" width="150">
            </div>
        </div>

        <!-- 修改用户名 -->
        <div class="form-group">
            <label for="userName">用户名:</label>
            <input type="text" class="form-control" id="userName" placeholder="新用户名">
        </div>

        <!-- 修改密码 -->
        <div class="form-group">
            <label for="password">新密码:</label>
            <input type="password" class="form-control" id="password" placeholder="新密码">
        </div>
        <div class="form-group">
            <label for="confirmPassword">确认密码:</label>
            <input type="password" class="form-control" id="confirmPassword" placeholder="再次输入新密码">
        </div>

        <!-- 提交按钮 -->
        <button class="btn btn-primary" id="submitBtn">确认修改</button>         
    </form>
    </div>
    

    <script>
        let avatarBytes = null; // 存储新头像的 byte[] 数据

        // 预览新头像并转换为 byte[]
        function previewAvatar(event) {
            const file = event.target.files[0];
            if (file) {
                // 图片预览
                const reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById('previewAvatar').src = e.target.result;
                };
                reader.readAsDataURL(file);

                // 转换为 byte[]
                const arrayBufferReader = new FileReader();
                arrayBufferReader.onload = function (e) {
                    const arrayBuffer = e.target.result;
                    avatarBytes = Array.from(new Uint8Array(arrayBuffer));
                };
                arrayBufferReader.readAsArrayBuffer(file);
            }
        }

        // 提交表单
        $('#submitBtn').click(function () {
            const userName = $('#userName').val();
            const password = $('#password').val();
            const confirmPassword = $('#confirmPassword').val();

            // 验证密码是否一致
            if (password && password !== confirmPassword) {
                alert('两次输入的密码不一致，请重新输入！');
                return;
            }

            $.ajax({
            url:"/user/getUserInfo"+location.search,
            type:"get",
            success:function(result){
                if(result.code!=200){
                    return;
                }
                var userInfo = result.data;
                $("#id").val(userInfo.id);
                $("#userName").val(userInfo.userName);
                $("#password").val(userInfo.password);
                $("#image").val(userInfo.image);
            },
            error: function (error) {
                if (error.status == 401) {
                    //用户未登录
                    location.href = "login.html";
                }
            }
        });

            // 提交到后端
            $.ajax({  
                url: "/user/updateUserInfo",  
                type: "post",    
                data: $("#updateUser").serialize(),
                success: function (result) {  
                    console.log(result)
                    // 解析返回的 Result 对象  
                    if (result.code === 200 && result.data === true) {  
                        alert('修改成功！');  
                        location.href = "profile.html"; // 跳转回个人信息页面  
                    } else {  
                        alert('修改失败：' + (result.message || '请稍后再试！'));  
                    }  
                },  
                error: function (error) {  
                    if (error.status == 401) {  
                        // 用户未登录  
                        alert("您尚未登录，请先登录！");  
                        location.href = "login.html"; // 重定向到登录页面  
                    } else {  
                        alert('发生错误：' + (error.responseText || '请稍后再试！'));  
                    }  
                }  
            });  
        }); 
        
    </script>  
</body>  

</html>  
